<template>
    <div id="login_box">
        <!-- <div class="ewm">
            <el-popover
                    placement="right"
                    trigger="hover">
                <el-image style="width: 128px; height: 128px" fit="contain" src="/image/ewm.png"></el-image>
                <el-image slot="reference" style="width: 32px; height: 32px"  src="/image/Android.png"></el-image>
            </el-popover>
            <div style="height: 5px"></div>
            <el-popover
                    placement="right"
                    trigger="hover">
                <el-image style="width: 128px; height: 128px" fit="contain" src="/image/ewm.png"></el-image>
                <el-image slot="reference" style="width: 32px; height: 32px"  src="/image/Apple.png"></el-image>
            </el-popover>
        </div> -->
        <div class="login_box">
            <div class="login_image">
                <img src="/image/logo.png" height="125px" width="125px" />
            </div>
            <div class="Nametitl">
                <h1>豪度OA平台</h1>
            </div>
            <el-form label-width="0px" ref="login_form_ref" :model="user" class="login_form">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" v-model="user.username" placeholder="请输入账号电话"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" prefix-icon="el-icon-s-goods" v-model="user.password"
                        placeholder="输入密码"></el-input>
                </el-form-item>
                <el-row class="btns">
                    <el-col :span="10" :offset="1">
                        <el-button class="btns" type="primary" @click="btn_login">登录</el-button>
                    </el-col>
                    <el-col :span="10" :offset="2">
                        <el-button class="btns" type="info" @click="btn_Reach">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import * as publicjs from "/public/Scriput/Public"
import * as THREE from 'three/build/three.module'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { Water } from 'three/examples/jsm/objects/Water'
import { Sky } from 'three/examples/jsm/objects/Sky'
import { GUI } from 'three/examples/jsm/libs/dat.gui.module';

let scene, camera, renderer, controls, gui;
let water, light, sky, sun, pmremGenerator;
let container;
let parameters = {
    inclination: 0.42,
    azimuth: 0.29
};
export default {
    name: "Login2",
    data() {
        return {
            user: {
                username: '',
                password: ''
            },
        }
    },
    mounted() {
        const _this = this
        this.$nextTick(() => {
            container = document.getElementById('login_box')
            _this.init()
            _this.box_renderer()

            _this.EnterEvent()
        })
    },
    methods: {
        //region **************************后台数据模块************************
        //登录
        btn_login() {

            if (this.user.password == "") {
                this.$message.warning('请填写密码');
                return;
            }
            let loadding = this.openLoading();
            this.$http.get('Login/Login?username=' + this.user.username + '&password=' + this.user.password).then(res => {
                loadding.close();
                if (res.data.msgDB.IsSuccess) {
                    window.sessionStorage.setItem('token', res.data.msgDB.Msg);
                    this.$store.commit('setdata', res.data.UserInfo)
                    this.$store.commit('setroledata', res.data.msgDB.Remark);
                    this.$http.get("PublicMethodApi/GetEnumDes").then(res => {
                        this.$store.commit('setEnumDes', res.data);
                    }).catch(() => {
                        this.$message.error('服务器异常,请联系管理员!')
                    })
                    this.$message.success('登录成功!')
                    this.$router.push({ path: '/Main' })
                    this.$http.get('PublicMethodApi/GetCompanyAllUsers').then(res => {
                        this.$store.commit('setAllUsers', res.data)
                    })
                } else {
                    loadding.close();
                    this.$message.warning('登录失败,请重试!')
                }
            }).catch(() => {
                loadding.close();
                this.$message.error('服务器异常,请联系管理员!')
            })
        },
        //重置
        btn_Reach() {
            this.$refs['login_form_ref'].resetFields()
        },
        //enter登录
        EnterEvent() {
            let that = this;
            document.onkeydown = function (e) {
                e = window.event || e;
                if (e.code == 'Enter' || e.code == 'enter') {//验证在登录界面和按得键是回车键enter
                    that.btn_login()
                }
            }
        },
        //endregion
        //region **************************three.js 场景模块************************
        //自动适屏大小
        onWindowResize() {
            renderer.setSize(container.clientWidth, container.clientHeight);
            camera.updateProjectionMatrix()
        },
        //初始加载
        init() {
            scene = new THREE.Scene(); //创建场景
            scene.background = new THREE.Color(0xf6f5ec)
            camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 1, 20000); //调整摄像头位置
            renderer = new THREE.WebGLRenderer({ antialias: true });   //渲染器 消除锯齿
            camera.position.set(200, 150, -200)
            camera.lookAt(0, 0, 0)
            scene.add(new THREE.AmbientLight(0xFFFFFF, 1));   //平型光 颜色白色 强度为1
            renderer.setPixelRatio(window.devicePixelRatio)//设置像素比,防止不同和设备模糊问题
            renderer.setSize(container.clientWidth, container.clientHeight);  //调整屏幕渲染宽度
            window.addEventListener('resize', this.onWindowResize, false);    //监听屏幕大小
            controls = new OrbitControls(camera, renderer.domElement);    //添加控制
            controls.update()
            container.appendChild(renderer.domElement); //渲染到div中
            controls.maxPolarAngle = Math.PI * 0.491;
            controls.maxDistance = 400
            controls.minDistance = 50
            light = new THREE.DirectionalLight(0xffffff, 0.8)
            scene.add(light)

            this.waterplane()
            this.Skybox()
        },
        //渲染页面
        box_renderer() {
            renderer.render(scene, camera)

            water.material.uniforms['time'].value += 1.0 / 60.0;
            requestAnimationFrame(this.box_renderer)
        },
        waterplane() {
            let waterGeometry = new THREE.PlaneBufferGeometry(10000, 10000)
            water = new Water(waterGeometry, {
                textureWidth: 512,
                textureHeight: 512,
                waterNormals: new THREE.TextureLoader().load('/image/waternormals.jpg', function (texture) {
                    texture.wrapS = texture.wrapT = THREE.RepeatWrapping
                }),
                sunDirection: new THREE.Vector3(),
                sunColor: 0xffffff,
                waterColor: 0x001e0f,
                distortionScale: 3.7,
                fog: scene.fog !== undefined
            })
            water.rotation.x = -Math.PI / 2
            scene.add(water)
        },
        Skybox() {
            sun = new THREE.Vector3();
            sky = new Sky();
            sky.scale.setScalar(10000);
            scene.add(sky);
            const skyUniforms = sky.material.uniforms;
            skyUniforms['turbidity'].value = 10;
            skyUniforms['rayleigh'].value = 2;
            skyUniforms['mieCoefficient'].value = 0.005;
            skyUniforms['mieDirectionalG'].value = 0.8;
            pmremGenerator = new THREE.PMREMGenerator(renderer);
            this.updateSun()
        },
        updateSun() {
            const theta = Math.PI * (parameters.inclination - 0.5);
            const phi = 2 * Math.PI * (parameters.azimuth - 0.5);
            sun.x = Math.cos(phi);
            sun.y = Math.sin(phi) * Math.sin(theta);
            sun.z = Math.sin(phi) * Math.cos(theta);
            sky.material.uniforms['sunPosition'].value.copy(sun);
            water.material.uniforms['sunDirection'].value.copy(sun).normalize();
            scene.environment = pmremGenerator.fromScene(sky).texture;
        },
        addGui() {
            gui = new GUI();
            const folderSky = gui.addFolder('Sky');
            folderSky.add(parameters, 'inclination', 0, 0.5, 0.0001).onChange(this.updateSun);
            folderSky.add(parameters, 'azimuth', 0, 1, 0.0001).onChange(this.updateSun);
            folderSky.open();

            const waterUniforms = water.material.uniforms;

            const folderWater = gui.addFolder('Water');
            folderWater.add(waterUniforms.distortionScale, 'value', 0, 8, 0.1).name('distortionScale');
            folderWater.add(waterUniforms.size, 'value', 0.1, 10, 0.1).name('size');
            folderWater.open();
        },
        //endregion
    },
}
</script>

<style scoped>
#login_box {
    z-index: -1;
    height: 100%;
}

.login_box {
    width: 450px;
    height: 300px;
    border-radius: 3px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    /*filter: blur(2px);*/
    /*z-index: 121;*/
}

.login_form {
    position: absolute;
    bottom: 22px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.Nametitl {
    text-align: center;
    top: 20px;
    margin-top: 72px;
    height: 20px;
    line-height: 20px;
}

.btns {
    width: 100%;
}

.login_image {
    position: absolute;
    border-radius: 50%;
    padding: 5px;
    border: #eee 1px solid;
    left: 50%;
    transform: translate(-50%, -58%);
    box-shadow: 0 0 10px #ddd;
    background: #fff;
}

.ewm {
    position: absolute;
    top: 20px;
    right: 10px;
    z-index: 3;
    display: inline-grid;
}
</style>
